<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle" width="1000px" @full-screen="handleFullScreenChange">
    <Echart :options="treeOptionsData" ref="echartInstance" :width="width" :height="height" />
    <template #footer>
      <el-button @click="dialogVisible = false">关 闭</el-button>
    </template>
  </Dialog>
</template>
<script lang="ts" setup>
import { treeOptions, handle } from './echarts-data'
import { set } from 'lodash-es'
const treeOptionsData = reactive(treeOptions) as any
defineOptions({ name: 'View' })
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('需求预览') // 弹窗的标题
const echartInstance = ref();
const width = ref('940px')
const height = ref('500px')
const treeData = ref()
/** 打开弹窗 */
const open = async (data) => {
  dialogVisible.value = true
  treeData.value = handle(data.value,0)
  init()
}
// 初始化
const init = ()=>{
  set(
    treeOptionsData,
    'series[0].data',
    treeData.value
  )
}
const handleFullScreenChange = (val) => {
  if (val) {
    const windowHeight = document.documentElement.offsetHeight
    const windowWidth = document.documentElement.offsetWidth
    width.value = `${windowWidth - 70}px`
    height.value = `${windowHeight - 180}px`
  } else {
    width.value = `940px`
    height.value = `500px`
  }
  nextTick(() => {
    echartInstance.value?.triggerResize()
  })
}

defineExpose({ open })
</script>
<style scoped lang="scss">
:deep(.v-echart) {
  height: 100% !important;
}
</style>
